<template>
  <div>
    <el-card>
      <div class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="实验题目">
            <el-input disabled placeholder="请输入--" v-model="ruleForm.experimentTitle"></el-input>
          </el-form-item>
          <el-form-item label="实验描述（选）">
            <el-input type="textarea" :disabled=disable placeholder="请输入--" v-model="ruleForm.experimentDes"></el-input>
          </el-form-item>
          <el-form-item label="实验目的" prop="purpose">
            <el-input type="textarea" :disabled=disable placeholder="请输入--" v-model="ruleForm.purpose"></el-input>
          </el-form-item>
          <el-form-item label="实验环境" prop="experimentEnvironment">
            <el-input type="textarea" :disabled=disable placeholder="请输入--" v-model="ruleForm.experimentEnvironment"></el-input>
          </el-form-item>
          <el-form-item label="实验准备" prop="experimentPreparation">
            <el-input type="textarea" :disabled=disable placeholder="请输入--" v-model="ruleForm.experimentPreparation"></el-input>
          </el-form-item>
          <el-form-item label="实验内容" prop="experimentContent">
            <el-input type="textarea" :disabled=disable placeholder="请输入--" v-model="ruleForm.experimentContent"></el-input>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload
              class="upload-demo"
              drag
              :action="uploadPath"
              :limit="1"
              multiple
              :on-success="handleUploadSuccess">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将附件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">文件格式无限制，但只能上传一个文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">返回上一页</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      uploadPath: '/api/file/upload',
      disable: false,
      ruleForm: {
        experimentTitle: '',
        experimentContent: '',
        experimentEnvironment: '',
        experimentPreparation: '',
        experimentDes: '',
        attachment: ''
      },
      rules: {
        experimentContent: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        experimentEnvironment: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        experimentPreparation: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        purpose: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    console.log('传参：', this.$route.query.submit)
    if (this.$route.query.submit) {
      this.disable = false
    } else {
      this.disable = true
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request.post(`/items/labAppointments/report/${this.$route.params.id}`, {
            ...this.ruleForm
          }).then(res => {
            console.log('提交实验报告：', res)
            if (!res.code) {
              this.$message.success('提交成功')
              this.$router.push({ path: '/studentAppoint/index' }) // 提交成功后跳转至实验页面
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleUploadSuccess(res, file) {
      if (!res.code) {
        this.ruleForm.attachment = res.content
      } else {
        this.$message.warning('附件上传失败！')
      }
    }
  }
}
</script>

<style>
.form {
  width: 1000px;
}
</style>
